<template>
  <d2-container>
    <div class="page-header">

      <el-avatar src="https://q1.qlogo.cn/g?b=qq&amp;nk=190848757&amp;s=640" class="user-avatar">

      </el-avatar>
      <div class="title">
        <span> <weather/> </span>
        <h1>早安, DV Admin, 开始您一天的工作吧！</h1>
      </div>
    </div>

    <el-row :gutter="5">

      <el-col :span="24">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <el-card shadow="hover" class="bg-primary we-box-card">
                <div class="we-card">
                  <div class="we-text">新晋用户</div>
                  <div class="we-text">{{ currentDate }}</div>
                </div>
                <div class="we-card">
                  <span class="we-number">{{ userCount }}</span>
                  <div class="we-icon">
                    <i class="fa-3x fa fa-user-plus" style="color:#fff;"></i>
                  </div>

                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="hover" class="bg-waring we-box-card">
                <div class="we-card">
                  <div class="we-text">部门</div>
                  <div class="we-text">{{ currentDate }}</div>
                </div>
                <div class="we-card">
                  <span class="we-number">{{ deptCount }}</span>
                  <div class="we-icon">
                    <i class="fa-3x fa fa-users" style="color:#fff;"></i>
                  </div>

                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="hover" class="bg-success we-box-card">
                <div class="we-card">
                  <div class="we-text">浏览量</div>
                  <div class="we-text">{{ currentDate }}</div>
                </div>
                <div class="we-card">
                  <span class="we-number">{{pv}}</span>
                  <div class="we-icon">
                    <i class="fa-3x fa fa-lightbulb-o" style="color:#fff;"></i>
                  </div>

                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="hover" class="bg-info we-box-card">
                <div class="we-card">
                  <div class="we-text">活跃用户</div>
                  <div class="we-text">{{ currentDate }}</div>
                </div>
                <div class="we-card">
                  <span class="we-number">{{uv}}</span>
                  <div class="we-icon">
                    <i class="fa-3x fa fa-user" style="color:#fff;"></i>
                  </div>

                </div>
              </el-card>
            </el-col>
            <el-col :span="5">
              <el-card shadow="hover" class="bg-primary we-box-card">
                <div class="we-card">
                  <div class="we-text">动态表单</div>
                  <div class="we-text">{{ currentDate }}</div>
                </div>
                <div class="we-card">
                  <span class="we-number">{{formCount}}</span>
                  <div class="we-icon">
                    <i class="fa-3x fa fa-wpforms" style="color:#fff;"></i>
                  </div>

                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5">

      <el-col :span="12">
        <el-card class="box-card" style="">
          <div slot="header" class="clearfix">
            <el-badge is-dot type="primary" class="we-badge"></el-badge><span>新晋用户趋势</span>
          </div>

          <div>
            <v-chart class="chart" :option="userOption"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="">
          <div slot="header" class="clearfix">
            <el-badge is-dot type="success" class="we-badge"></el-badge><span>部门成员统计</span>
          </div>

          <div>
            <v-chart class="chart" :option="option"/>
          </div>
        </el-card>
      </el-col>

    </el-row>
    <el-row :gutter="5">
      <el-col :span="12">
        <el-card class="box-card" style="">
          <div slot="header" class="clearfix">
            <el-badge is-dot type="warning" class="we-badge"></el-badge><span>PV (浏览量) & UV (活跃用户)</span>
          </div>

          <div>
            <v-chart class="chart" :option="pvOption"/>
          </div>
        </el-card>

      </el-col>
      <el-col :span="12">
        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <el-badge is-dot type="info" class="we-badge"></el-badge><span>友情链接</span>
          </div>
          <el-row>
            <el-col :span="8" v-for="({name,imageUrl,slogan,link},index) in projects" :key="index">
              <el-card shadow="hover" style="padding: 0">
                <div class="project-detail">
                  <div>
                    <a :href="link" target="_blank">
                      <img :src="imageUrl" alt="">
                      <span v-text="name" class="name"></span>
                    </a>
                  </div>
                  <div v-text="slogan" class="slogan" :title="slogan"></div>
                </div>

              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

  </d2-container>
</template>

<script>
import {use} from 'echarts/core'
import sakura from '@/assets/style/echarts/theme/westeros'
import {CanvasRenderer} from 'echarts/renderers'
import {PieChart, LineChart} from 'echarts/charts'
import {
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart, {THEME_KEY} from 'vue-echarts'
import Weather from '@/views/dashboard/components/weather'
import {request} from "@/api/service";

use([
  CanvasRenderer,
  PieChart,
  LineChart,
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  // azul
])
export default {
  name: 'workbench',
  components: {
    Weather,
    VChart
  },
  provide: {
    [THEME_KEY]: 'westeros'
  },
  data() {
    return {
      currentDate: new Date().toLocaleDateString().split('/').join('-'),
      userCount: 0,
      deptCount: 0,
      pv: 0,
      uv: 0,
      formCount: 0,
      activities: [
        {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
          message: '我们经济落后5000，但我们阵容值10000',
          createTime: '1个小时前'
        },
        {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
          message: 'fnc已经神志不清了',
          createTime: '2个小时前'
        },
        {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
          message: '这个炼金很有艺术性',
          createTime: '3个小时前'
        },
        {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
          message: '对面打得很好，什么？打个分？四分吧',
          createTime: '4个小时前'
        },
        {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
          message: '这个炼金很有艺术性',
          createTime: '3个小时前'
        },
        {
          avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
          message: '对面打得很好，什么？打个分？四分吧',
          createTime: '4个小时前'
        }
      ],
      projects: [
        {
          name: '官方文档',
          imageUrl: '/image/django-vue-admin.png',
          slogan: 'Django-Vue-Admin 是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。',
          link: 'http://django-vue-admin.com'
        },
        {
          name: 'D2admin',
          imageUrl: '/image/d2-pub.png',
          slogan: 'D2Admin (opens new window)是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，' +
            '小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统快速开发。',
          link: 'https://d2.pub/zh'
        },
        {
          name: '若依',
          imageUrl: '/image/ruoyi.png',
          slogan: '基于SpringBoot、Shiro、Mybatis的权限后台管理系统。',
          link: 'http://ruoyi.vip/'
        },
        {
          name: 'SimpleUi',
          imageUrl: '/image/simple-ui.png',
          slogan: '一个基于Django Admin的现代化主题。',
          link: 'https://simpleui.72wo.com/'
        },
        {
          name: 'Gin-Vue-Admin',
          imageUrl: '/image/gin-vue-admin.png',
          slogan: '使用gin+vue进行极速开发的全栈后台管理系统。',
          link: 'https://www.gin-vue-admin.com/'
        },
        {
          name: 'BBS-GO',
          imageUrl: '/image/bbs-go.png',
          slogan: '基于Go语言的开源BBS系统',
          link: 'https://docs.bbs-go.com/'
        },
        {
          name: 'DCM',
          imageUrl: '/image/django-comment-migrate.png',
          slogan: '这是一个Django model注释迁移的app',
          link: 'https://github.com/starryrbs/django-comment-migrate'
        },
        {
          name: 'Jetbrains',
          imageUrl: '/image/jetbrains.jpeg',
          slogan: '我们构建我们的软件，让您可以享受构建自己的软件的乐趣',
          link: 'https://www.jetbrains.com/'
        },
        {
          name: 'Django',
          imageUrl: '/image/django.png',
          slogan: '有期限的完美主义者的网络框架。',
          link: 'https://github.com/django/django'
        }
      ],
      option: {
        textStyle: {
          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
        },
        title: {
          show: false,
          text: '部门成员占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            // center: ['50%', '60%'],
            data: [],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
          }
        ]
      },
      pvOption: {
        // textStyle: {
        //   fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
        // },
        title: {
          show: false,
          text: 'PV & UV',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          // formatter: '{b} : {c}'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'PV',
            // stack: 'total',
            type: 'line',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: 'UV',
            // stack: 'total',
            type: 'line',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      userOption: {
        // textStyle: {
        //   fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
        // },
        title: {
          show: false,
          text: '新晋用户趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          // formatter: '{b} : {c}'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新晋用户',
            // stack: 'total',
            type: 'line',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }

        ]
      }
    }
  },
  methods: {
    gotoRoute(route) {
      this.$router.push(route)
    },
    initDept() {
      request({
        url: '/api/stat',
        method: 'get',
        params: {
          model: 'system.dept',
          group_by: 'name',
          count: 'users'
        }
      }).then(data => {
        this.option.series[0].data = data.map(item => ({name: item.name, value: item.count}))
      })
    },
    initUserCount() {
      request({
        url: '/api/stat',
        method: 'get',
        params: {
          model: 'system.users',
          group_by: 'day__create_datetime',
          count: 'id'
        }
      }).then(data => {
        const user = data.find(i => i.day === this.currentDate)
        this.userCount = user ? user.count : 0;
      })
      request({
        url: '/api/stat',
        method: 'get',
        params: {
          model: 'system.dept',
          group_by: 'day__create_datetime',
          count: 'id'
        }
      }).then(data => {
        const user = data.find(i => i.day === this.currentDate)
        this.deptCount = user ? user.count : 0;
      })
    },
    initLogin() {
      request({
        url: '/api/stat',
        method: 'get',
        params: {
          model: 'system.operationlog',
          group_by: 'day__create_datetime',
          count: 'creator_id',
          order_by: 'create_datetime'
        }
      }).then(data => {
        const user = data.find(i => i.day === this.currentDate)
        this.pv = user ? user.count : 0;
        this.pvOption.series[0].data = data.map(item => (item.count))
        this.pvOption.xAxis.data = data.map(item => item.day)
      })
      request({
        url: '/api/stat',
        method: 'get',
        params: {
          model: 'system.operationlog',
          group_by: 'day__create_datetime',
          count: 'creator_id',
          order_by: 'create_datetime',
          request_path: '/api/login/'
        }
      }).then(data => {
        const user = data.find(i => i.day === this.currentDate)
        this.uv = user ? user.count : 0;
        this.pvOption.series[1].data = data.map(item => (item.count))
      })
    },
    initUser() {
      request({
        url: '/api/stat',
        method: 'get',
        params: {
          model: 'system.users',
          group_by: 'day__create_datetime',
          count: 'id',
          order_by: 'create_datetime'
        }
      }).then(data => {
        this.userOption.series[0].data = data.map(item => (item.count))
        this.userOption.xAxis.data = data.map(item => item.day)
      })
    }
  },
  created() {
    this.initDept();
    this.initLogin();
    this.initUser();
    this.initUserCount();
  }
}
</script>

<style scoped lang="scss">

$userAvatarLength: 72px;
.we-box-card {
  border-radius: 20px !important;
}

.we-card {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.we-badge{
  margin-top: 3px;
  margin-right: 4px;
}

.we-content {
  text-align: center;
}

.we-text {
  color: #fff
}

.we-number {
  font-size: 40px;
  color: #fff
}

.page-header {
  box-sizing: border-box;
  padding: 16px;

  .user-avatar {
    width: $userAvatarLength;
    height: $userAvatarLength;
    line-height: $userAvatarLength;
    display: inline-block;
  }

  .title {
    display: inline-block;
    padding: 0 0 0 15px;
    position: relative;
    top: -5px;

    h1 {
      font-size: 1.125rem;
      font-weight: 500;
      line-height: 1.75rem;
    }

    span {
      font-size: 14px;
      color: rgba(0, 0, 0, .45);
    }
  }

}

.box-card {
  border-radius: 5px !important;
}

.project-detail {
  color: rgba(0, 0, 0, .45);
  height: 65px;

  img {
    width: 25px;
    height: 25px;
  }

  .name {
    margin-left: 1rem;
    font-size: 1rem;
    line-height: 2rem;
    height: 2rem;
    display: inline-block;
    color: rgba(0, 0, 0, .85);
    position: relative;
    top: -5px;
  }

  .slogan {
    font-size: 12px;
    padding: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .team {
    font-size: 14px;
  }
}

.activity {
  padding: 0;

  .activity-avatar {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .activity-detail {
    padding: 10px;
    line-height: 15px;
    font-size: 14px;
    color: rgba(0, 0, 0, .85);
  }
}

.chart {
  height: 340px;
}

.el-divider--horizontal {
  margin: 4px 0;
  background: 0 0;
  border-top: 1px solid #e8eaec;

}

.el-card, .el-message {
  border-radius: 0;
}
</style>
